<template>
	<view class="workDetails">
		<headTop>
			<uv-navbar title="意见详情" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>
		<view class="info">
			<view class="info-title">{{ workData.title }}</view>
			<view>订单编号: {{ workData.order_no }}</view>
			<view>工单状态: {{ workStatus[workData.status].name }}</view>
			<view>工单类型: {{ workType[workTypeList.indexOf(workData.type)].name }}</view>
			<view>创建时间: {{ workData.created_at }}</view>
			<view>更新时间: {{ workData.updated_at }}</view>
			<view>工单描述: {{ workData.content }}</view>
			<uv-divider></uv-divider>
			<view class="work">
				<view class="work-text">工单截图</view>
				<image class="work-bg" src="/static/images/tag.png"></image>
				<view v-for="(item, index) in workData.image" :key="index" class="work-img" @tap="imgTap(item)">
					<uv-image :src="item" width="100%"></uv-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();

	/* -------------------------------------------------------------头部----------------------------------------------- */
	import headTop from "@/components/headTop/index.vue";

	/* ---------------------------------------------------获取跳转参数------------------------------------------------- */
	import { onLoad } from "@dcloudio/uni-app";
	onLoad((options) => {
		getData(parseInt(options.id));
	});

	/* ---------------------------------------------------获取数据------------------------------------------------- */
	import { workApi } from "@/api/index";
	const workData = ref();
	const getData = async (id) => {
		try {
			const res = await workApi.getdetail({ id: id });
			workData.value = res;
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};

	const workTypeList = ["product", "order", "suggestion", "account"];

	const workType = [
		{ name: "商品相关", type: "product" },
		{ name: "订单相关", type: "order" },
		{ name: "建议反馈", type: "suggestion" },
		{ name: "账单相关", type: "account" }
	];

	const workStatus = [
		{ name: "待处理", status: 0 },
		{ name: "处理中", status: 1 },
		{ name: "待回复", status: 2 },
		{ name: "已解决", status: 3 },
		{ name: "已关闭", status: 4 }
	];

	const imgTap = (item) => {
		uni.previewImage({
			urls: [item] // 图片地址数组
		});
	};
	/* ------------------------------------------------------------跳转上一页----------------------------------------------- */
	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};
</script>

<style lang="scss">
	.workDetails {
		.info {
			background-color: rgba(255, 255, 255, 0.3);
			border-radius: 2vw;
			padding: 3vw;

			.info-title {
				font-size: 30rpx;
				font-weight: 600;
				margin: 2vw 0;
			}

			.info-img {
				font-size: 30rpx;
				font-weight: 600;
				margin: 4vw 0;
				text-align: center;
			}

			.work {
				text-align: center;

				.work-bg {
					height: 1.5vw;
					width: 26vw;
				}

				.work-text {
					font-weight: 600;
					transform: translate(-1vw, 4vw);
					font-size: 36rpx;
					position: relative;
					z-index: 99;
				}

				.work-img {
					margin: 2vw 0;
				}
			}
		}
	}
</style>